<!doctype html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Quick HTTPS forward/reverse proxy for your HTTP web service - httpsproxy2http.novalagung.com</title>

        <style>
            @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

            body {
                font-family: 'Roboto', sans-serif;
            }
            .container {
                padding: 20px;
            }
            .container > p:first-child {
                margin-top: 0;
            }
            blockquote {
                position: relative;
                margin-bottom: 1em;
                padding: 12px 12px 12px 16px;
                margin: 0;
            }
            blockquote:before {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 4px;
                border-radius: 8px;
            }
            blockquote p {
                margin: 0;
            }
            blockquote.danger {
                background-color: #FFF0F0;
                color: #FF0000;
            }
            blockquote.danger:before {
                background: #FF0000;
            }
            blockquote.info {
                background-color: #f4ffe8;
                color: #62922a;
            }
            blockquote.info:before {
                background: #8BC34A;
            }
            h1, h2 {
                color: #565656;
            }
            a {
                color: #4e4e4e;
                font-weight: bold;
                text-decoration: none;
                border-bottom: 1px solid #dadada;
            }
            a:hover {
                border-bottom-color: #909090;
            }
            hr {
                opacity: 0.2;
                margin: 20px 0px;
            }
            .github-links {
                position: fixed;
                top: 10px;
                right: 30px;
                padding: 10px;
                background-color: rgba(255, 255, 255, 0.7);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Quick HTTPS forward/reverse proxy for your HTTP web service - httpsproxy2http</h1>

            <p>When your site is running with HTTPS-enabled, and tried to embed an URL or perform an API call towards external URL which is HTTP (not HTTPS), you will see the error in below:</p>
            <blockquote class="danger">
                <p>Mixed Content: The page at 'https://your-frontend.com/' was loaded over HTTPS, but requested an insecure resource 'http://your-webservice-api.com/v2/some/endpoint?param=1'.</p>
                <p>This request has been blocked; the content must be served over HTTPS.</p>
            </blockquote>
            <p>It's mean that your API call or request is somehow blocked by the browser due to https://your-frontend.com/ was loaded using HTTPS-enabled but http://your-webservice-api.com is not. Trying to perform a call to a HTTP website from a webpage loaded via HTTPS is not allowed by browser, because it is insecure.</p>
            
            <hr>

            <p>This simple service will help you to resolve that error. Simply change your URL from:</p>
            <blockquote class="info">
                <p>http://your-webservice-api.com/v2/some/endpoint?param=1</p>
            </blockquote>
            <p>To:</p>
            <blockquote class="info">
                <p><b>{{ .host }}</b>/your-webservice-api.com/v2/some/endpoint?param=1</p>
            </blockquote>
            
            <hr>

            <p>In summary, use the <a href="https://httpsproxy2http.novalagung.com">https://httpsproxy2http.novalagung.com</a> as the host of your destination URL, and put your actual URL as path next to it.</p>

            <p>All resources like request headers, request body, query strings, cookies, etc; all of them will also be proxified. So it's safe to use httpsproxy2http on RESTful operations.</p>
            
            <hr>

            <h2>Disclaimer</h3>

            <p>We do not store any of your data. Use at your own risk. For better security, We recommend to setup the httpsproxy2http on your own cloud.</p>
            
            <hr>

            <h2>Usage</h3>

            <p>Default forward proxy:</p>
            <blockquote class="info">
                <p><b>{{ .host }}</b>/&lt;your-url&gt;</p>
                <p><b>{{ .host }}</b>/your-webservice-api.com/v2/some/endpoint?param=1</p>
            </blockquote>

            <p>With explicitly proxy type (forward/reverse):</p>
            <blockquote class="info">
                <p><b>{{ .host }}/forward</b>/&lt;your-url&gt;</p>
                <p><b>{{ .host }}/forward</b>/your-webservice-api.com/v2/some/endpoint?param=1</p>
            </blockquote>

            <blockquote class="info">
                <p><b>{{ .host }}/reverse</b>/&lt;your-url&gt;</p>
                <p><b>{{ .host }}/reverse</b>/your-webservice-api.com/v2/some/endpoint?param=1</p>
            </blockquote>

            <p>Forward proxy is the default when the type is not explicitly set</p>
            
            <hr>

            <h2>Setup httpsproxy2http in your own cloud</h3>

            <p>Please navigate to <a href="https://github.com/novalagung/httpsproxy2http">https://github.com/novalagung/httpsproxy2http</a> for the details.</p>
        </div>

        <div class="github-links">
            <a class="github-button" href="https://github.com/novalagung/httpsproxy2http" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star novalagung/httpsproxy2http on GitHub">Star</a>
            &nbsp;
            <a class="github-button" href="https://github.com/novalagung" data-size="large" aria-label="Follow @novalagung on GitHub">
                Follow @novalagung
            </a>
            <script async defer src="https://buttons.github.io/buttons.js"></script>
        </div>
    </body>
</html>